﻿<phone:PhoneApplicationPage xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
	xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" 
	xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
	xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:YoutubeInAppWP7_ViewModels="clr-namespace:YoutubeInAppWP7.ViewModels" 
    x:Class="YoutubeInAppWP7.SearchPage"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True"
    d:DesignWidth="480" d:DesignHeight="768"  
	mc:Ignorable="d">

	<phone:PhoneApplicationPage.DataContext>
		<YoutubeInAppWP7_ViewModels:SearchPageViewModel/>
	</phone:PhoneApplicationPage.DataContext>

    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="YoutubeInAppWP7" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="Search" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
        	<Grid.RowDefinitions>
        		<RowDefinition Height="0.112*"/>
        		<RowDefinition Height="0.888*"/>
        	</Grid.RowDefinitions>
        	<TextBox x:Name="SearchTextBox" Margin="0" TextWrapping="Wrap" Text="{Binding SearchText, Mode=TwoWay}" d:LayoutOverrides="Height" Width="390" HorizontalAlignment="Left"/>
        	<Button Content="Go" HorizontalAlignment="Right" Margin="0" VerticalAlignment="Bottom" Click="Button_Click"/>
            <ListBox Margin="0,0,-12,0" ItemsSource="{Binding Results}" FontSize="30" Grid.Row="1" SelectionChanged="ListBox_SelectionChanged">
                <ListBox.ItemTemplate>
                    <DataTemplate>
                    	<Grid Width="466" Height="176" Margin="5,0,0,0">
                    		<Grid.ColumnDefinitions>
                    			<ColumnDefinition Width="0.345*"/>
                    			<ColumnDefinition Width="0.655*"/>
                    		</Grid.ColumnDefinitions>
                    		<Grid.RowDefinitions>
                    			<RowDefinition Height="0.417*"/>
                    			<RowDefinition Height="0.583*"/>
                    		</Grid.RowDefinitions>
                    		<TextBlock Text="{Binding Title}" Grid.ColumnSpan="2" VerticalAlignment="Center" HorizontalAlignment="Left" FontSize="18.667" TextDecorations="Underline" FontWeight="Bold" />
                    		<Image Source="{Binding ThumbnailUrl}" Margin="0" Grid.Row="1" d:LayoutOverrides="VerticalAlignment" HorizontalAlignment="Left"/>
                    		<TextBlock Margin="0,0,8,0" TextWrapping="Wrap" Text="{Binding Description}" FontSize="16" Grid.Row="1" Grid.Column="1"/>
                    	</Grid>
                    </DataTemplate>
                </ListBox.ItemTemplate>
                <ListBox.ItemsPanel>
                    <ItemsPanelTemplate>
                    	<VirtualizingStackPanel />
                    </ItemsPanelTemplate>
                </ListBox.ItemsPanel>
            </ListBox>
            <TextBlock x:Name="Instructions" HorizontalAlignment="Center" TextWrapping="Wrap" Text="Let's Search Youtube (not m.youtube) for some videos, then select one to play it back in the app!" VerticalAlignment="Top" Grid.Row="1" FontSize="24" Foreground="#FFE7E4E4" Width="400"/>
        </Grid>
</Grid>
</phone:PhoneApplicationPage>